<template>
  <div class="boxR">
    <div class="hD data-item">
      <div class="tc">地产</div>
      <div style="display: flex;justify-content: space-between;">
        <div class="hDt" style="text-align:center;width:50%">
          <div>在售：<span class="color">5</span></div>
        </div>
        <div class="hDt" style="text-align:center;width:50%">
          <div>租赁：<span class="color">6</span></div>
        </div>
      </div>
      <div class="hDt">
        <div>增值服务：</div>
        <div class="color">{{option.value_added_services}}</div>
      </div>
      <div class="data-foot-line"></div>
    </div>
    <div class="hC data-item">
      <div class="tc">直播</div>
      <div class="flexcloun">
        <div class="hCt">
        <div class="flex">达人探店：
        <div v-html="lineFeed(option.exploring_stores_with_influencers)"></div>
        </div>
      </div>
      <div class="hCt">
        <div class="flex">每天直播：
        <div v-html="lineFeed(option.live_streaming_every_day)"></div>

        </div>
      </div>
      <div class="hCt">
        <div class="flex">雪场情况：
          <div v-html="lineFeed(option.ski_slope_situation)"></div>
        </div>
      </div>
      </div>
      <div class="data-foot-line"></div>
    </div>
    <div class="hB data-item">
      <div class="tc">交通</div>
      <div class="flexcloun">
        <div class="hBt">
        <div class="flex">园区内摆渡车：
          <div v-html="lineFeed(option.shuttle)"></div>
        </div>
        
      </div>
      <div class="hBt">
        <div class="flex">高铁接驳：
        <div v-html="lineFeed(option.high_speed_rail_docking)"></div>

        </div>
      </div>
      <div class="hBt">
        <div class="flex">机场接驳：
        <div v-html="lineFeed(option.airport_docking)"></div>

        </div>
      </div>
      </div>
      <div class="data-foot-line"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let _this = this;
    return {
      rowData:{},
      data: _this.formatLongDate(new Date()),
      option:{
        // 增值服务
        value_added_services:"保洁、宠物喂养、团购保洁、宠物喂养、团购",
        // 达人探店
        exploring_stores_with_influencers:"9:00-11:00，13:00-14:00，16:00-18:00",
        // 每天直播
        live_streaming_every_day:"9:00-11:00，13:00-14:00，16:00-18:00",
        // 雪场情况
        ski_slope_situation:"9:00-11:00，13:00-14:00，16:00-18:00",
        // 园内摆渡车
        shuttle:"9:00-11:00，13:00-14:00，16:00-18:00",
        // 高铁接泊
        high_speed_rail_docking:"9:00-11:00，13:00-14:00，16:00-18:00",
        // 机场接泊
        airport_docking:"9:00-11:00，13:00-14:00，16:00-18:00",
      }
    };
  },
  created() {},
  mounted() {
    this.getData()
    this.lineFeed()
  },
  methods: {
    lineFeed(str){
    if(str!=''){
      let list = str.split(",")
      if(list.length!=0){
        list.forEach((item,index) => {
              if(index % 3===0 && index!=0){
                list = list.slice(0, index).concat('</br>', list.slice(index));
              }
          });
      }
      return list.join(' ')
    }else{
      return ''
    }
   
    },
    getData() {
      let parmas = { order: "desc", page: 1, rows: 30, sort: "id", wheres: [] };
      this.http
        .post("api/Kuaibao_large_screen_data/getPageData", parmas)
        .then((res) => {
          if (res.rows.length != 0) {
            this.option = res.rows[0];
          } 
        });
    },
    formatLongDate(date) {
      let myyear = date.getFullYear();
      let mymonth = date.getMonth() + 1;
      let myweekday = date.getDate();
      let myHour = date.getHours();
      let myMin = date.getMinutes();
      let mySec = date.getSeconds();
      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      if (myHour < 10) {
        myHour = "0" + myHour;
      }
      if (myMin < 10) {
        myMin = "0" + myMin;
      }
      if (mySec < 10) {
        mySec = "0" + mySec;
      }
      return (
        myyear +
        "-" +
        mymonth +
        "-" +
        myweekday +
        " " +
        myHour +
        ":" +
        myMin +
        ":" +
        mySec
      );
    },
  },
};
</script>
<style scoped lang="less">
.flex{
  display: flex;
  height: 100%;
  > div{
        height: 90%;
        overflow: hidden;
        color: #43a3fb;
        font-weight: bold;
        overflow: hidden;
      }
}
.boxR {
  .tc {
    text-align: center;
    background-color: #335f88;
    width: 106%;
    margin-left: -10px;
    margin-top: -10px;
    font-size: 13px;
    line-height: 26px;
    margin-bottom: 4%;
  }
  .hD {
    padding: 10px;
    height: 25vh;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    .hDt {
      margin-top: 15px;
     
    }
    > div .hDt {
      margin-top: 0;
    }
  }
  .hC {
    margin-top: 15px;
    padding: 10px;
    height: calc((100vh - 25vh - 90px) / 2);
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    .hCt {
      height: 30%;
      // overflow: hidden;
      margin-top: 8px;
      > div:nth-child(2) {
        color: #43a3fb;
        font-weight: bold;
      }
    }
    > .hCt:nth-child(1) {
      margin-top: 0px;
    }
  }
  .hB {
    margin-top: 15px;
    padding: 10px;
    height: calc((100vh - 25vh - 90px) / 2);
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    .hBt {
      margin-top: 8px;
      > div:nth-child(2) {
        // padding-left: 80px;
        color: #43a3fb;
        font-weight: bold;
      }
    }
    > .hBt:nth-child(1) {
      margin-top: 0px;
    }
  }
  .color {
    font-weight: bold;
    color: #43a3fb;
  }
}
.flexcloun{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:5% 0;
  height: 90%;
}
</style>
